<!doctype html>
<!--
@license
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>

  <meta charset="utf-8">

  <script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
  <script src="../../../web-component-tester/browser.js"></script>

  <title>css-parse</title>

  <link rel="import" href="../../polymer.html">

</head>
<body>

  <style id="test">
    :host {
      background: red;
    }

    .foo .bar .baz, zonk[happy]:focus {
      font-family: sans-serif;
      font-size: 15px;
    }

    @-webkit-keyframes fill-unfill-rotate {
      12.5% { transform: rotate(135deg);  }
      25%   { transform: rotate(270deg);  }
      37.5% { transform: rotate(405deg);  }
      50%   { transform: rotate(540deg);  }
      62.5% { transform: rotate(675deg);  }
      75%   { transform: rotate(810deg);  }
      87.5% { transform: rotate(945deg);  }
      to    { transform: rotate(1080deg); }
    }

    @media (max-width: 400px) {
      div {
        margin-left: 0 !important;
      }
    }
  </style>

  <style id="test-ignore">
    @import '';

    /* comment */
    .stuff {
      background: red;
    }
    /* comment */
  </style>
<script>

  function sanitizeCss(text) {
    return text.replace(/[\s]+/g, ' ').trim();
  }

  suite('css-parse', function() {

    setup(function() {
      css = Polymer.CssParse;
      s = document.querySelector('style#test');
      tree = css.parse(s.textContent);
    });

    test('css rules parse', function() {
      assert.equal(tree.rules.length, 4, 'unexpected number of rules');
      assert.equal(tree.rules[2].rules.length, 8, 'unexpected number of rules in keyframes');
      assert.equal(tree.rules[3].rules.length, 1, 'unexpected number of rules in @media');
      console.log('test');
    });

    test('rule selectors parse', function() {
      assert.equal(tree.rules[0].selector, ':host', 'unexpected selector');
      assert.equal(tree.rules[2].selector, '@-webkit-keyframes fill-unfill-rotate', 'unexpected selector in keyframes');
      assert.equal(tree.rules[3].selector, '@media (max-width: 400px)', 'unexpected selector in @media');
    });

    test('rule cssText parse', function() {
      assert.equal(tree.rules[0].cssText, 'background: red;', 'unexpected cssText');
      assert.match(tree.rules[2].cssText, /^12.5%/, 'unexpected cssText in keyframes');
      assert.equal(tree.rules[2].rules[2].cssText, 'transform: rotate(405deg);', 'unexpected cssText in keyframes');
      assert.match(tree.rules[3].cssText, /^div/, 'unexpected cssText in @media');
      assert.equal(tree.rules[3].rules[0].cssText, 'margin-left: 0 !important;', 'unexpected cssText in @media');
    });

    test('rule types', function() {
      assert.equal(tree.rules[0].type, css.types.STYLE_RULE);
      assert.equal(tree.rules[1].type, css.types.STYLE_RULE);
      assert.equal(tree.rules[2].type, css.types.KEYFRAMES_RULE);
      assert.equal(tree.rules[3].type, css.types.MEDIA_RULE);
      assert.equal(tree.rules[3].rules[0].type, css.types.STYLE_RULE);

    });

    test('rules stringify', function() {
      var orig = sanitizeCss(s.textContent);
      var result = sanitizeCss(css.stringify(tree));
      assert.equal(result, orig, 'unexpected stringified output');
    });

    test('parse correctly ignores @import and comments', function() {
      var s2 = document.querySelector('#test-ignore');
      var t = css.parse(s2.textContent);
      assert.equal(t.rules[0].selector, '.stuff', 'unexpected rule selector');
      assert.equal(t.rules[0].cssText, 'background: red;', 'unexpected rule cssText');
      var result = sanitizeCss(css.stringify(t));
      assert.equal(result, '.stuff { background: red; }', 'unexpected stringified output');
    });

  });
</script>

</body>
</html>
